<div fxFlexFill fxLayout="row">
  <aside>
    <app-matrix-tag-selector
      [selectedTag]="selectedTag"
      [matrixTags]="matrixTags"
      (selectedChange)="onTagSelectedChange($event)">
    </app-matrix-tag-selector>
  </aside>
  <article fxFlex="100%" fxLayout="column">
    <header>
      <app-farm-multi-selector
        [farms]="farms"
        (selectedChange)="onFarmSelectedChange($event)">
      </app-farm-multi-selector>
    </header>
    <main fxFlex="100%" class="scrollbar-matrix-farm" id="style-3" fxFlexFill fxLayout="column" fxLayoutAlign="none">
      <app-matrix-farm
        *ngFor="let matrixFarm of matrixFarms"
        [matrixFarm]="matrixFarm">
      </app-matrix-farm>
    </main>
    <footer>
      <app-matrix-total
        [totalName]="selectedTag?.tagName"
        [matrixStateGroupTotals]="matrixStateGroupTotals"
        (selectedChange)="onMatrixStateSelectedChange($event)"></app-matrix-total>
    </footer>
  </article>
  <div>
